<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <script src="./jquery-1.12.1.js"></script>
    <script>
        // 回调地狱的终极 es7 解决方案 async await
        // 用同步的方法写异步的代码

        // 比如jq ajax 请求一个接口的几种写法
        // 基本写法
        $.ajax({
            url: "a.json",
            success(res) {
                // console.log(res);
            },
        });

        // promise写法
        $.ajax({
            url: "a.json",
        }).then((res) => {
            // console.log(res);
        });

        //async 是异步的意思 await 是等待的意思
        // 他们两个配套使用
        // 用同步的代码实现异步操作  相当于是把同步的代码放在异步代码后执行
        async function getData() {
            let res = await $.ajax({
                url: "a.json",
            });

            return res;
        }
        // async的返回值永远是一个promise对象;

        // console.log(getData());
        getData().then((res) => {
            // console.log(res);
        });

        // async解决回调地狱：
        async function cbHandler() {
            let resa = await $.ajax({
                url: "a.json",
            });
            let resb = await $.ajax({
                url: "b.json",
            });
            let resc = await $.ajax({
                url: "c.json",
            });
            return resc;
        }

        cbHandler().then((res) => {
            // console.log(res);
        });

        // 在es6的时候还有一种方法generator解决回调地狱 但是后来背async这个终极解决方案取代了
        function* cbHandler2() {
            yield $.ajax({
                url: "a.json",
            });
            yield $.ajax({
                url: "b.json",
            });
            yield $.ajax({
                url: "c.json",
            });
        }
        let obj = cbHandler2();

        obj
            .next()
            .value.then((res) => {
                console.log(res);
                return obj.next().value;
            })
            .then((res) => {
                console.log(res);
                return obj.next().value;
            })
            .then((res) => {
                console.log(res);
            });
    </script>
</body>

</html>